<template>
  <ve-card title="审批人">
    <view class="alert-content">
      <view class="alert-item">
        <image class="update-img" src="../../../static/images/alert_icon.png" mode="widthFix"></image>
        <text>1、请至少选择一个审批人</text>
      </view>
      <view class="alert-item pd">2、提交审批后，无法修改审批人</view>
    </view>
    <view class="checkFlowData">
      <view class="checkFlowItem" v-for="(item, index) in form.checkFlowList" :key="index">
        <view class="step-wrap">
          <text class="postName">{{ item.postName }}</text>
          <view v-if="index < form.checkFlowList.length - 1" class="line"></view>
        </view>
        <view class="select-wrap" @click="getIndex(index)">
          <text v-if="pageTitle == '修改报销单' || pageTitle == '修改付款单'" style="font-size: 30rpx; color: #8491a8">
            {{ item.staffName || '请选择' }} >
          </text>
          <remote-select
            v-else
            :label="form.checkFlowList[index].staffName"
            v-model="item.staffId"
            type="operate_staff_change"
            :params="{
              staffPost: item.post,
            }"
            @change="changeFlowItem"
          />
        </view>
      </view>
    </view>
  </ve-card>
</template>

<script setup>
  import { ref, inject } from 'vue'

  const form = inject('form')
  const props = defineProps({
    pageTitle: {
      type: String,
      default: '',
    },
  })

  const clickIndex = ref(null) //点击的index
  const getIndex = (index) => {
    clickIndex.value = index
  }
  const changeFlowItem = (val, option) => {
    form.value.checkFlowList[clickIndex.value].staffName = option.realname
  }
</script>

<style lang="less" scoped>
  .alert-content {
    background: #e8f3ff;
    padding: 24rpx;

    .alert-item {
      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 12rpx;
      }
      line-height: 44rpx;
    }
    .pd {
      margin-left: 44rpx;
    }
  }
  .checkFlowData {
    padding: 24rpx 0;
    .checkFlowItem {
      margin-left: 36rpx;
      .step-wrap {
        position: relative;
        .postName {
          color: #3072f6;
          font-size: 30rpx;
          font-weight: 600;
        }
        .line {
          position: absolute;
          top: 40rpx;
          left: -31rpx;
          width: 2rpx;
          height: 80rpx;
          background: #f4f4f4;
        }
      }
      .step-wrap:before {
        content: '';
        position: absolute;
        top: 15rpx;
        left: -36rpx;
        width: 14rpx;
        height: 14rpx;
        background: #3072f6;
        border-radius: 14rpx;
      }
      .select-wrap {
        display: flex;
        margin: 16rpx 0;
      }
    }
  }
</style>
